/*
 * @Descripttion:
 * @version:
 * @Author: kl2018
 * @Date: 2020-04-01 14:18:03
 * @LastEditors: kl2018
 * @LastEditTime: 2020-08-18 10:38:34
 */

import React, { Component } from 'react';
import { hashHistory } from 'react-router';
import EchartsElementComp from './EchartsElementComp';
import '../../style/protalElement.less';
import { WeaLocaleProvider } from 'ecCom';

const { getLabel } = WeaLocaleProvider;


export default class PortalElement extends Component {
  constructor(props) {
    super(props);
    const datas = props.datas || [];
    const showType = props.showType || 3;
    this.state = {
      elementType: showType, // 1 公文库统计 2.公文流程统计 3.归档
      datas,
      // datas1:[
      //   {
      //     typeName:'发文库',
      //     count: 7,
      //     queryParams: {searchParams:1},
      //     info:[
      //       {
      //         itemName:'本周成文',
      //         itemCount: 2,
      //         queryParams: {searchParams:2}
      //       },{
      //         itemName:'本月成文',
      //         itemCount: 7,
      //         queryParams: {searchParams:3}
      //       },{
      //         itemName:'本年成文',
      //         itemCount: 7,
      //         queryParams: {searchParams:4}
      //       }
      //     ],
      //     jumpUrl:'/main/offical/odocLibraryNew'
      //   },
      //   {
      //     typeName:'收文库',
      //     count: 7,
      //     queryParams: {},
      //     info:[
      //       {
      //         itemName:'本周成文',
      //         itemCount: 2,
      //         queryParams: { }
      //       },{
      //         itemName:'本月成文',
      //         itemCount: 7,
      //         queryParams: { }
      //       },{
      //         itemName:'本年成文',
      //         itemCount: 7,
      //         queryParams: { }
      //       }
      //     ],
      //     jumpUrl:'/main/offical/odocLibraryNew'
      //   }
      // ],
      datas2: [
        {
          merge: '0', // 0 合并 1拆分
          imgLeft: '1', // 0 左图 1 右图
          datas: [
            {
              img: '/images/bbb_wev8.gif',
              title: '套红统计',
              info: [
                {
                  type: '集团公司发文流程',
                  items: [
                    {
                      itemName: '未用印文件',
                      itemCount: 10,
                      queryParams: {},
                    }, {
                      itemName: '已用印文件',
                      itemCount: 10,
                      queryParams: {},
                    },
                  ],
                },
                {
                  type: '集团公司发文流程',
                  items: [
                    {
                      itemName: '未用印文件',
                      itemCount: 10,
                      queryParams: {},
                    }, {
                      itemName: '已用印文件',
                      itemCount: 10,
                      queryParams: {},
                    },
                  ],
                }, {
                  type: '集团公司发文流程',
                  items: [
                    {
                      itemName: '未用印文件',
                      itemCount: 10,
                      queryParams: {},
                    }, {
                      itemName: '已用印文件',
                      itemCount: 10,
                      queryParams: {},
                    },
                  ],
                },

              ],
              jumpUrl: '/main/offical/odocLibraryNew',
              queryParams: {},
            },
            {
              title: '套红统计',
              img: '/images/bbb_wev8.gif',
              info: [
                {
                  items: [
                    {
                      itemName: '未用印文件',
                      itemCount: 10,
                      queryParams: {},
                    },
                  ],
                },
                {
                  items: [
                    {
                      itemName: '未用印文件',
                      itemCount: 10,
                      queryParams: {},
                    },
                  ],
                },
                {
                  items: [
                    {
                      itemName: '未用印文件',
                      itemCount: 10,
                      queryParams: {},
                    },
                  ],
                },
              ],
              jumpUrl: '/main/offical/odocLibraryNew',
            },
          ],
        },
      ],
      datas3: [
        {
          seriesData: [
            { name: '待办', value: 466, id: 'a' },
            { name: '已办', value: 62, id: 'a' },
            { name: '待阅', value: 0, id: 'a' },
            { name: '已阅', value: 0, id: 'a' },
            { name: '超时', value: 0, id: 'a' },
            { name: '在办', value: 464, id: 'a' },
            { name: '未办', value: 2, id: 'a' },
            { name: '已督办', value: 8, id: 'a' },
            { name: '被督办', value: 4, id: 'a' },
            { name: '跟踪', value: 528, id: 'a' },
          ],
          legendData: ['待办', '已办', '待阅', '已阅', '超时', '在办', '未办', '已督办', '被督办', '跟踪'],
          echartsType: '2', // '1' 饼状图 '2' 环状图 '0' 柱状图
          series: [{
            data: [46, 62, 0, 0, 0, 44, 2, 8, 4, 58], // x轴坐标所对应的数据
            dataKey: ['a', 'a', 'a', 'a', 'a', 'a', 'a'],
            name: '数量', //
            type: 'bar', // 代表柱状图
          }], // 柱状图数据
          xAxisData: ['待办', '已办', '待阅', '已阅', '超时', '在办', '未办', '已督办', '被督办', '跟踪'], // x轴坐标
          title: '公文办理统计',
        },
      ],
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ datas: nextProps.datas, elementType: nextProps.showType });
  }

  render() {
    const { elementType, datas } = this.state;
    return (
      // <div className='odoc-protalElement' style={{ height: elementType == 4 ? '330px' : '150px' }}>
      <div className="odoc-protalElement">

        {/* 公文库统计 */}
        {elementType == '1' && this.getFirstType(datas)}
        {/* 套红用印归档统计 */}
        {elementType == '2' && this.getContent(datas)}

        {elementType == '3' && <EchartsElementComp ecId={`${this && this.props && this.props.ecId || ''}_EchartsElementComp@j5py8y`} echartsOption={datas} />}
      </div>
    );
  }

  getContent(datas) {
    if (datas[0].imgLeft == '0') {
      return this.getImageLeftContent(datas[0]);
    }
    return this.getImageRightContent(datas[0]);
  }

  getImageRightContent(datas) {
    // const rowHeight = datas.merge == '1' ? '180px' : '110px';
    return (
      <div className="imgRightContent">
        {
          datas.datas.map(item => (
            // <div className='row' style={{ height: rowHeight }}>
            <div className="row">
              <div className="layoutLeft">
                <div className="layoutRightContent layoutRightContent-title icon-coms-Line">{item.title}</div>
                {item.info.map((list) => {
                  const width = list.type ? '50%' : '100%';
                  const itemwidth = `${100 / list.items.length}%`;
                  return (
                    <div className="layoutRightContent">
                      {list.type && <div className="requestName textOverflow" title={list.type}>{list.type}</div>}
                      <div className="infoDetail" style={{ width }}>
                        {list.items.map(i => (
                          <div className="items" style={{ width: itemwidth }}>
                            <div className="item-name textOverflow">{i.itemName}</div>
                            <div className="item-number textOverflow" onClick={() => hashHistory.push({ pathname: item.jumpUrl, query: i.queryParams })}>{i.itemCount}份</div>
                          </div>
                        ))}
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="layoutRight">
                <img src={item.img} className="imgBox" />
              </div>

              {datas.merge == '1' && <a className="more" onClick={() => hashHistory.push({ pathname: item.jumpUrl, query: item.queryParams })}>更多&gt;&gt;</a>}
            </div>
          ))
        }
      </div>
    );
  }

  getImageLeftContent(datas) {
    return (
      <div className="imgLeftContent">
        {datas.datas.map(item => (
          <div className="row">
            <div className="layoutLeft">
              <img src={item.img} className="imgBox" />
            </div>
            <div className="layoutRight">
              {item.info.map((list) => {
                const width = list.type ? '50%' : '100%';
                return (
                  <div className="layoutRightContent">
                    {list.type && <div className="requestName textOverflow" title={list.type}>{list.type}</div>}
                    <div className="infoDetail" style={{ width }}>
                      {list.items.map(i => (
                        <div className="items">
                          <div className="item-number" onClick={() => hashHistory.push({ pathname: item.jumpUrl, query: i.queryParams })}>{i.itemCount}份</div>
                          <div className="item-name textOverflow">{i.itemName}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
            {datas.merge == '1' && <a className="more" onClick={() => hashHistory.push({ pathname: item.jumpUrl, query: item.queryParams })}>更多&gt;&gt;</a>}
          </div>
        ))}
      </div>
    );
  }


  getFirstType(datas) {
    const elementHeight = datas.length > 0 ? `${100 / datas.length}%` : '100%';
    return (
      datas.map((item, index) => {
        const listheight = item.info.length > 0 ? `${100 / item.info.length}%` : '100%';
        return (
          <div className="element1"
            style={{ height: elementHeight, marginBottom: `${item.info.length > 0 ? '1%' : '0px'} 0px` }}
            key={index}
          >
            <div className="elementLeftLyout" >
              <div className="elementLeftLyout-top" style={{ color: '#3876de' }} >
                <span onClick={() => hashHistory.push({ pathname: item.jumpUrl, query: item.queryParams })} style={{ cursor: 'pointer' }}>{item.count}</span>
              </div>
              <div className="elementLeftLyout-bottom">{item.typeName}</div>
            </div>
            <div className="elementRightLyout">
              {item.info.map((list, i) => (
                <div style={{ height: listheight }} className="listItem" key={i} >
                  <div className="name">{list.itemName}</div>
                  <div
                    className="count"
                    style={{ cursor: 'pointer' }}
                    onClick={() => hashHistory.push({ pathname: item.jumpUrl, query: list.queryParams })}
                  >{list.itemCount}{getLabel('509855', '份')}</div>
                </div>
              ))}
            </div>
          </div>
        );
      })
    );
  }
}
